<template>
  <div>
      
      <MyHeader1 title="用户中心"></MyHeader1>
	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.html">· 个人信息</a></li>
				<li><a href="user_center_order.html">· 全部订单</a></li>
				<li><a href="user_center_site.html" class="active">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">收货地址</h3>
				<div class="site_con">
					<dl>
						<dt>当前地址：</dt>
						<dd v-for="i in address_list" :key="i.id">{{i.site}} （{{i.name}} 收） {{i.phone}}
							<span v-if="i.flag==0"><button @click="update(i.id)">设置默认</button></span>
							<span v-else>已默认</span>
						</dd>
					</dl>					
				</div>
				<h3 class="common_title2">编辑地址</h3>
				<div class="site_con">
					<form>
						<div class="form_group">
							<label>收件人</label>
							<input type="text" name="" v-model="name">
						</div>
						<div class="form_group form_group2">
							<label>详细地址：</label>
							<textarea class="site_area" v-model="site"></textarea>
						</div>
						<div class="form_group">
							<label>邮编：</label>
							<input type="text" name="" v-model="postcode">
						</div>
						<div class="form_group">
							<label>手机：</label>
							<input type="text" name="" v-model="phone">
						</div>

						<input type="button" name="" value="提交" class="info_submit" @click="btn">
					</form>
				</div>
		</div>
	</div>


    <Certification></Certification>
	
  </div>
</template>

<script>
import MyHeader1 from './common/Header1'
import Certification from './common/Certification'
export default {
    components:{
        MyHeader1,
        Certification
    },
    data(){
        return{
          name:'',
           site:'',
            postcode:'',
			phone:'',
			address_list:[]
        }
    },methods:{
        btn(){
            const token=sessionStorage.getItem('token')
            if(!token){
                alert('请先登录，在填写收货地址')
                return
            }
            const fd={
                'name':this.name,
                'site':this.site,
                'postcode':this.postcode,
                'phone':this.phone
            }
            this.axios.post('/address?token='+token,fd).then(resp=>{
                console.log(resp.data)
                alert(resp.data.msg)
            }).catch(error=>{
                console.log(error)
            })
		},
		update(id){
		const token=sessionStorage.getItem('token')
            if(!token){
                alert('请先登录，在填写收货地址')
                return
			}
			//更新默认地址
			this.axios.put('/address?token='+token,{'id':id})	.then(resp=>{
				console.log(resp.data)
				alert(resp.data.msg)
				this.$router.go(0)
			}).catch(error=>{
				console.log(error)
			})
		}
	},
	created(){
		// 先获取token 然后 去查询
		const token=sessionStorage.getItem("token")
		if(!token){
			alert("先登录在 查询")
			return 
		}
		this.axios.get('address?token='+token).then(resp=>{
			console.log(resp.data)
			this.address_list=resp.data.data
		}).catch(error=>{
			console.log(error)
		})
	}
	
}
</script>

<style>

</style>